/**
 * before 变量
 */
$bs: 18px; /* small 左上角的小号切角 */
$bl: 26px; /* large 其他三个大号切角 */
$bw: 2px; /* 线段粗细 */
$bt: 124px; /* 标题宽度 */

/**
 * after 变量
 */
$as: 24px; /* small 左上角的小号切角 */
$al: 36px; /* large 其他三个大号切角 */
$aw: 2px; /* 线段粗细 */
$at: 140px; /* 标题宽度 */

body.CoreBody .el-dialog {
  padding: 16px;
  background-color: transparent;
  background-image: url(/common/kj-bg.png);
  background-position: 190px 12px;
  background-repeat: no-repeat;

  /* ============================== header + body + footer ============================== */
  > div {
    background-color: rgba(26, 70, 96, 0.7);

    /* —————————————————————————————— header —————————————————————————————— */
    &:first-child {
      clip-path: polygon(
        /* 左上角左下点 */ 0 $bs,
        /* 左上角右上点 */ $bs 0,
        /* 中间线左上点 */ $bs + $bt 0,
        /* 中间线右下点 */ $bs + $bt + $bs $bs,
        /* 右上角左上点 */ calc(100% - $bl + 1px) $bs,
        /* 右上角右下点 */ calc(100% + 1px) $bs + $bl,
        /* 右下角 */ 200% 200%,
        /* 左下角 */ 0 200%
      );
    }

    /* —————————————————————————————— body 或 footer —————————————————————————————— */
    &:last-child {
      clip-path: polygon(
        /* 左上角 */ -100% -100%,
        /* 右上角 */ 200% -100%,
        /* 右下角右上点 */ 100% calc(100% - $bl),
        /* 右下角左下点 */ calc(100% - $bl) 100%,
        /* 左下角右下点 */ $bl 100%,
        /* 左下角左上点 */ 0 calc(100% - $bl)
      );
    }
  }

  /* ============================== 內折亮线 ============================== */
  &::before {
    content: "";
    position: absolute;
    z-index: 10;
    top: 16px - $bw;
    right: 16px - $bw;
    bottom: 16px - $bw;
    left: 16px - $bw;
    pointer-events: none;
    background: #61caff;
    clip-path: polygon(
      /* 外线，左上角左下点 */ 0 $bs + $bw,
      /* 外线，左上角右上点 */ $bs + $bw 0,

      /* 外线，中间线左上点 */ $bs + $bw + $bt + 1px 0,
      /* 外线，中间线右下点 */ $bs + $bw + $bt + $bs + 1px $bs,

      /* 外线，右上角左上点 */ calc(100% - $bl) $bs,
      /* 外线，右上角右下点 */ 100% $bl + $bs,

      /* 外线，右下角右上点 */ 100% calc(100% - $bl),
      /* 外线，右下角左下点 */ calc(100% - $bl) 100%,

      /* 外线，左下角右下点 */ $bl + $bw 100%,
      /* 外线，左下角左上点 */ 0 calc(100% - $bl),
      /* 外线，左上角左下点 */ 0 $bs + $bw,
      /* 内线，左上角左下点 */ $bw $bs + $bw,

      /* 内线，左下角左上点 */ $bw calc(100% - $bw - $bl + 1px),
      /* 内线，左下角右下点 */ $bw + $bl + 1px calc(100% - $bw),
      /* 内线，右下角左下点 */ calc(100% - $bw - $bl + 1px) calc(100% - $bw),
      /* 内线，右下角右上点 */ calc(100% - $bw) calc(100% - $bw - $bl + 1px),
      /* 内线，右上角右下点 */ calc(100% - $bw) $bl + $bw + $bs - 1px,
      /* 内线，右上角左上点 */ calc(100% - $bw - $bl + 1px) $bw + $bs,

      /* 内线，中间线右下点 */ $bs + $bw + $bt + $bs $bs + $bw,
      /* 内线，中间线左上点 */ $bs + $bw + $bt $bw + 1px,

      /* 内线，左上角右上点 */ $bs + $bw + 1px $bw + 1px,
      /* 内线，左上角左下点 */ $bw $bs + $bw + 1px
    );
  }

  /* ============================== 外折暗线 ============================== */
  &::after {
    content: "";
    position: absolute;
    z-index: 10;
    top: 0;
    right: -2px;
    bottom: -4px;
    left: -2px;
    pointer-events: none;
    background: rgba(28, 58, 75, 0.7);
    clip-path: polygon(
      /* 外线，左上角左下点 */ 0 $as + $aw,
      /* 外线，左上角右上点 */ $as + $aw 0,

      /* 外线，中间线左上点 */ $as + $aw + $at + 1px 0,
      /* 外线，中间线右下点 */ $as + $aw + $at + $as + 1px $as,

      /* 外线，右上角左上点 */ calc(100% - $al - 1px) $as - 1px,
      /* 外线，右上角右下点 */ 100% $al + $as,

      /* 外线，右下角右上点 */ 100% calc(100% - $al),
      /* 外线，右下角左下点 */ calc(100% - $al) 100%,

      /* 外线，左下角右下点 */ $al + $aw 100%,
      /* 外线，左下角左上点 */ 0 calc(100% - $al),
      /* 外线，左上角左下点 */ 0 $as + $aw,
      /* 内线，左上角左下点 */ $aw $as + $aw,

      /* 内线，左下角左上点 */ $aw calc(100% - $aw - $al + 1px),
      /* 内线，左下角右下点 */ $aw + $al + 1px calc(100% - $aw),
      /* 内线，右下角左下点 */ calc(100% - $aw - $al + 1px) calc(100% - $aw),
      /* 内线，右下角右上点 */ calc(100% - $aw) calc(100% - $aw - $al + 1px),
      /* 内线，右上角右下点 */ calc(100% - $aw) $al + $aw + $as - 1px,
      /* 内线，右上角左上点 */ calc(100% - $aw - $al) $aw + $as - 1px,

      /* 内线，中间线右下点 */ $as + $aw + $at + $as $as + $aw,
      /* 内线，中间线左上点 */ $as + $aw + $at $aw,

      /* 内线，左上角右上点 */ $as + $aw $aw,
      /* 内线，左上角左下点 */ $aw $as + $aw + 1px
    );
  }
}

body.CoreBody .el-dialog__header {
  padding: 26px $bl 4px;
  z-index: 10;
  background-image: url(/common/kj-bg-title.png);
  background-position: 0 0;
  background-repeat: no-repeat;

  .el-dialog__title {
    position: relative;
    display: inline-block;
    top: -16px;
    left: 56px;
    transform: translateX(-50%);
    color: #fff;
    text-shadow: 0px 1px 3px #fff;
  }

  .el-dialog__headerbtn {
    top: 48px;
    right: 42px;

    i {
      color: #fff;
    }
  }
}

body.CoreBody .el-dialog__body {
  padding: 16px 26px 26px;

  > .CoreWeb-EasyScroll {
    padding: 20px;
    background: rgba(9, 29, 41, 0.8);
  }
}

body.CoreBody .el-dialog__footer {
  padding-top: 20px;
}

.CoreWeb-Modal-body {
  padding: 20px;
  background: rgba(9, 29, 41, 0.8);
}
